<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器例子</title>
        <style>
            *{font-size:1em;}
            #myDiv{background-color:red;}
            .myClass{background-color:green;}
            .myClass2{background-color:blue;}
            header{border:2px solid #000;}
            .myClass p{color:aliceblue;}
            .notSelect *:not(h2){
                color:red;
                font-size:20px;
                font-family:"宋体";
            }
            :empty{
                width:300px;
                height:30px;
                background-color:blueviolet;
            }
            :target{
                background-color:crimson;
            }
            p:first-child{
                color:pink;
            }
            p:last-child{
                color:royalblue;
            }
            li:only-child{
                color:red;
            }
            li:nth-child(2){
                color:red;
            }
            li:nth-last-child(1){
                color:sandybrown;
            }
            tr:nth-child(even){
                background-color:skyblue;
            }
            tr:nth-child(odd){
                background-color:lightcyan
            }
            a:link{color:lightsalmon;}
            a:visited{color:lightslategray;}
            a:hover{color:lightskyblue;}
            a:active{color:red;}

            footer:before{
                content:"我是路过的，看不见我";
                color:red;
            }
            footer:after{
                content:"我也是路过的";
                color:blue;
            }
            #id1,#id2,#id3{
                width:400px;
                height:50px;
                border:1px solid red;
                margin:5px;
            }
            ul li p{
                color:red;
            }
            ul>p{
                color:red;
            }
            li+p{
                color:red;
            }
            li~p{
                color:red;
            }
        </style>
    </head>
    <body>
        <header>
            标题
        </header>
        <nav>
        </nav>
        <article>
            <div id="myDiv">ID选择器</div>
            <div class="myClass">类选择器</div>
            <div class="myClass2">类选择器2</div>
            <div class="myClass">类选择器</div>
            <div class="myClass">
                <p>我是myClass的第一层后代元素</p>
                <br>
                <div>
                    <p>我是myClass的第二层后代元素</p>
                </div>
            </div>
        </article>
        <div class="notSelect">
            <h2>标题2</h2>
            <p>这是内容</p>
            <p></p>
        </div>
        <a href="#tg">超链接</a>
        <div id="tg">
            <h2>标题2</h2>
            <p>这是内容</p>
            <p></p>
        </div>
        <div>
            <p>第一个p元素</p>
            <p>第二个p元素</p>
            <p>第三个p元素</p>
            <p>第四个p元素</p>
        </div>
        <ul>
            <li>第一项</li>
            <li>第二项</li>
        </ul>
        <ul>
            <li>唯一一项</li>
        </ul>
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
            <li>第五项</li>
            <li>第六项</li>
        </ul>

        <table>
            <tr>
                <td>第一列数据</td>
                <td>第二列数据</td>
            </tr>
            <tr>
                <td>第一列数据</td>
                <td>第二列数据</td>
            </tr>
            <tr>
                <td>第一列数据</td>
                <td>第二列数据</td>
            </tr>
            <tr>
                <td>第一列数据</td>
                <td>第二列数据</td>
            </tr>
            
        </table>
        <br><br>
        <div id="id1"></div>
        <div id="id2"></div>
        <div id="id3"></div>
        <br><br>
        <p>我在外面</p>
        <ul>
            <p>我是什么</p>
            <li><p>选项一</p></li>
            <li><p>选项二</p></li>
            <p>分隔线</p>
            <p>分隔线2</p>
            <li>选项三</li>
        </ul>
        <br><br>
        <a href="#">我是超链接</a>
        <footer>copyright&copy;18大数据1 班</footer>
    </body>
</html>